<script setup lang="ts">
import userRequest from '@/request/userRequest';
import Tools from '@/utils/tools';

interface IProps {
  callerDevicePartInfo: IObtainCallerDevicePartInfoRes;
}

interface IState {
  show: boolean;
  placeholder: string;
  cascaderData: IBuildingTreeRes[];
  cascaderOptions: IBuildingTreeRes[];
  cascaderValue: string;
  cascaderSelectedOptions: IBuildingTreeRes[];
}

type EmitEvents = {
  (event: 'change', data: IBuildingTreeRes[]): void;
};

const props = defineProps<IProps>();
const state = reactive<IState>({ show: false, placeholder: '', cascaderOptions: [], cascaderData: [], cascaderSelectedOptions: [], cascaderValue: '' });
const emits = defineEmits<EmitEvents>();

onMounted(() => {
  switch (props.callerDevicePartInfo.addressType) {
    case 4:
      state.placeholder = '请选择门牌号';
      fetchFloorTreeInformation({ parentId: props.callerDevicePartInfo.floorId });
      break;
    case 6:
      state.placeholder = '请选择层、门牌号';
      fetchFloorTreeInformation({ parentId: props.callerDevicePartInfo.unitId });
      break;
    case 7:
      state.placeholder = '请选择单元、层、门牌号';
      fetchFloorTreeInformation({ parentId: props.callerDevicePartInfo.buildId });
      break;
    case 8:
      state.placeholder = '请选择栋、单元、层、门牌号';
      fetchFloorTreeInformation({ villageId: props.callerDevicePartInfo.villageId });
      break;
  }
});

// 获得单元层信息
const fetchFloorTreeInformation = (params: { parentId?: number; villageId?: number }) => {
  userRequest.BuildingTree(params).then((res) => {
    state.cascaderData = res.data;
    state.cascaderOptions = Tools.deEmptyChildrenCascader(res.data).map((item) => {
      if (props.callerDevicePartInfo.addressType === 4) {
        return item;
      }
      return { ...item, children: [] };
    });
  });
};

// 地区选择器完成事件
const handleCascaderFinish = (e: any) => {
  const { selectedOptions, value } = e.detail;
  state.cascaderSelectedOptions = selectedOptions;
  state.cascaderValue = value;
  state.show = false;
};

// 地区选择器选中事件
const handleCascaderChange = (e: any) => {
  const { tabIndex, selectedOptions, value } = e.detail;
  const insertData = Tools.findPathDFS<IBuildingTreeRes>(state.cascaderData, e.detail.value);
  if (!insertData) return;
  const index = state.cascaderData.findIndex((item) => item.id === insertData.id);
  state.cascaderValue = value;
  state.cascaderSelectedOptions = selectedOptions;
  if (tabIndex === 0) {
    state.cascaderOptions = Tools.deEmptyChildrenCascader(state.cascaderData).map((item) => {
      return { ...item, children: [] };
    });
    state.cascaderOptions[index].children = insertData.children;
  }
  emits('change', state.cascaderSelectedOptions);
};
</script>

<template>
  <van-cell title="住址" required is-link v-if="[4, 6, 7, 8].some((item) => item === props.callerDevicePartInfo.addressType)" @click="state.show = true">
    <view class="c-text-color-grey text-align-left" v-if="state.cascaderSelectedOptions.length === 0">{{ state.placeholder }}</view>
    <view class="c-color-black text-align-left" v-else>{{ state.cascaderSelectedOptions.map((item: IBuildingTreeRes) => item.name).join('-') }}</view>
  </van-cell>
  <van-popup :show="state.show" round position="bottom" @close="state.show = false">
    <van-cascader
      :active-color="'#ffc300'"
      :show="state.show"
      :value="state.cascaderValue"
      :field-names="{ text: 'name', value: 'id' }"
      :title="state.placeholder"
      :options="state.cascaderOptions"
      @close="state.show = false"
      @finish="handleCascaderFinish"
      @change="handleCascaderChange"
    />
  </van-popup>
</template>
